<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../static/iconfont/font/iconfont.css">
<title>Document</title>
<style>
     *{margin: 0;padding: 0;}
ul li{list-style: none;}
img{display: block;}
a{text-decoration:none ;
color: black;}
input,textarea{outline: none;}
.wnqc:after{
	content: "123";
	display: block;
	clear: both;
    width: 0px;
    height: 0px;
	visibility: hidden;	
}
      .container{
            width: 1050px;
            margin: 0 auto;
      }
      .container::after{
            content: "";
            display: block;
            clear: both;
            overflow: hidden;
      }
      .goods{
            width: 185px;
            float: left;
            margin-right: 20px;
            margin-top: 20px;
            border:salmon solid 1px;
      }
      .goods:nth-of-type(5n){
            margin-right: 0;
      }
      .goods img{
            width: 100%;
      }
      .goods h1,h2{
            font-size: 16px;
            line-height: 30px;
            padding: 2px 5px;
      }
      .goods h1{
            overflow: hidden;
            -webkit-line-clamp: 1; 
            -webkit-box-orient: vertical;
            display: -webkit-box;
      }
      .goods h2{
            color: black;
      }
      #pagination{
            display:flex;
            justify-content: center;
            margin-top: 50px;
      }
      #pagination li{
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            background-color: salmon;
            list-style : none;
            margin-left: 20px;
            cursor: pointer;
      }
      .goods button{
          background-color: thistle;
          opacity: .5;
          border-radius: 10px;
          color: crimson;

      }
  .black-belt{
    width: 100%;
    height: 42px;
    background-color: black;
   }
      .blackxin{
                  margin: auto;
                  width: 1240px;
                  height: 42px;
                  display: flex;
                  justify-content: space-between; 
                  color: white;
      }
    .ikea{
          width: 1240px;
          height: 40px;
          margin: auto;
          display: flex;
          justify-content: space-between;
    }
    .mine{
    margin-left: 40px;
    font-size: 26px;
    line-height: 60px;
}
.heart,.shopcar{
    margin-left: 25px;
    font-size: 26px;
    line-height: 60px;
}

 

</style>
</head>
<body>

      <div class="black-belt">
            <div class="blackxin">
            <span class="iconfont icon-riqixuanze app">下载app</span>
            <span class="chinese"> 中文 | EN</span>   
      </div>
      </div>

       <div class="ikea">
             <a href="./ikea.html">
             <img src="https://static.web.ikea.cn/static/images/headerImages/logo.svg" alt="">
            </a>
             <div class="three"> <a href="./enroll.html">
                  <span class="iconfont icon-wode mine"></span>
                  </a>
                  <a href="./log in.html">
                  <span class="iconfont icon-shoucang1 heart"></span>
                  </a>
                  <a href="./shopcar.html">
                  <span class="iconfont icon-gouwuche shopcar"></span>
                  </a>
            </div>
       </div>
<div class="container">
      <div class="goods">
         
      </div>
</div>
<ul id="pagination">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
</ul>
<script src="../static/libs/javascripts/jQuery.js"></script>
<script src="../static/libs/javascripts/cookie.js"></script>
<script src="../static/libs/javascripts/ajax.js"></script>   
<script src="../src/javascripts/goodlists.js"></script>





</body>
</html>